<template>
	<view class="detail-dagang-card bg-white">
		<view class="card-content">
			<view class="comment-box">
					<view class="skuItem" v-for="(item, index) in state.commentList" :key="index"
						:title="''" @click="change(index)">
						<view class="title-slot ss-flex ss-items-center ss-m-t-10">
							<view class="line"></view>
							<span>{{ item.name }}</span>
						</view>
						<view class="content">
							<view v-for="(item, index) in item.skucontent.filter(item => item.is_shiting==1)" class="content-row ss-flex ss-row-between" :key="index" @click="change(index)">
								<view>{{ item.title }}</view>
								<view class="btn-shiting" v-if="item.is_shiting==1" @click="bindshiting(item.shiting_course)">试听</view>
							</view>
						</view>
					</view>
			</view>
			<s-empty v-if="state.commentList?.length === 0" paddingTop="0" icon="/static/comment-empty.png"
				text="持续更新中……"></s-empty>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		onBeforeMount
	} from 'vue';
	import sheep from '@/sheep';
  import { showAuthModal } from '@/sheep/hooks/useModal';
	const props = defineProps({
		goodsId: {
			type: [Number, String],
			default: 0,
		},
	});
	const state = reactive({
		commentList: [],
		total: 0,
	});
	async function getComment(id) {
		const {
			data
		} = await sheep.$api.goods.dagang(id, {
			list_rows: 8,
		});
		var elements = document.getElementsByClassName('uni-video-cover-play-button');
		if (elements.length > 0) {
			elements[0].click();
		} else {
			setTimeout(function() {
				var elements = document.getElementsByClassName('uni-video-cover-play-button');
				if (elements.length > 0) {
					elements[0].click();
				} else {
					console.log('没有找到具有类名 "uni-video-control-button-play" 的元素');
				}
			}, 1000);
		}
		var elements = document.getElementsByClassName('uni-video-control-button-play');
		if (elements.length > 0) {
			elements[0].click();
		} else {
			setTimeout(function() {
				var elements = document.getElementsByClassName('uni-video-control-button-play');
				if (elements.length > 0) {
					elements[0].click();
				} else {
					console.log('没有找到具有类名 "uni-video-control-button-play" 的元素');
				}
			}, 1000);
		}
		state.commentList = data;
		console.log(state.commentList);
	}

	onBeforeMount(() => {
		getComment(props.goodsId);
	});


	function bindshiting(shiting_course) {

    //sheep.$router.navigatorToCourse(shiting_course);

    sheep.$store('user').getInfo()
      .then((resinfo) => {
        //console.log(resinfo);
        if (!resinfo.mobile) {
          //如果手机号为空，或者没有绑定
          sheep.$store('modal').$patch((state) => {
            state.auth = '';
            setTimeout(() => {
              showAuthModal('changeMobile');
            }, 100);
          });
          //停止执行
          return false;
        } else {
          sheep.$router.navigatorToCourse(shiting_course);
        }
      });
		//sheep.$router.navigatorToCourse(shiting_course);
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.detail-dagang-card {
		margin: 0 20rpx 20rpx 0rpx;
		padding: 0rpx 20rpx;

		.ss-p-b-30 {
			margin-bottom: 0rem !important;
		}

		.line {
			width: 6rpx;
			height: 30rpx;
			background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
			border-radius: 3rpx;
		}

		.card-header {

			.title {
				font-size: 44rpx;
				font-weight: bold;
				line-height: 200rpx;
			}

			.des {
				font-size: 24rpx;
				color: $dark-9;
			}

			.more-btn {
				font-size: 24rpx;
				color: var(--ui-BG-Main);
				line-height: normal;
			}

			.cicon-forward {
				font-size: 24rpx;
				line-height: normal;
				color: var(--ui-BG-Main);
				margin-top: 4rpx;
			}
		}
	}

	.comment-box {
		border-bottom: 2rpx solid #eeeeee;

		&:last-child {
			border: none;
		}
	}

	.skuname {
		font-size: 0.875rem;
		font-weight: bold;
		color: #000000;
		padding-left: 5px;
	}

	.content {
		width: 100%;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}

	.btn-shiting {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 101px;
		height: 32px;
		border-radius: 5px;
		color: white;
		font-size: 14px;
		background: #ff6000;
	}

	.course {
		display: flex;
		height: 72rpx;
		padding: 8px 0;
		/* 条目内部的垂直间距 */
		justify-content: flex-end;

		span {
			color: grey;
		}

		.item-dot {
			position: absolute;
			left: 6px;
			color: #ff6000;
		}

		.item-title {
			font-size: 24rpx;
			font-weight: 500;
			line-height: normal;
			width: 92%;
			margin-left: 10px;
		}



		.tag-content {
			flex: 1;
			min-width: 0;
			white-space: nowrap;
		}

		.tag-box {
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.tag {
			flex-shrink: 0;
			padding: 4rpx 10rpx;
			font-size: 24rpx;
			font-weight: 500;
			border-radius: 4rpx;
			color: var(--ui-BG-Main);
			background: var(--ui-BG-Main-tag);
		}
	}

	.vertical-line {
		width: 1px;
		background-color: #ff6000;
		margin-right: 10px;
		margin-left: 8px;
		/* flex-grow: 1; */
		align-self: stretch;
	}

	.item-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		/* 条目垂直排列 */
	}

	.title-slot {
		font-size: 16px;
		font-weight: bold;
		padding-bottom: 15px;
		padding-top: 15px;
	}

	.title-slot span {
		/* 假设你想为 uni-icons 组件添加样式 */
		margin-left: 8px;
		/* 示例：设置右边距 */
	}

	.content-row {
		padding: 10px 0;
		border-bottom: 1px solid #e4e4e4;
		font-size: 14px;
		line-height: 40px;
	}
	.content-row::after {
		content: none;
	}
</style>